<script setup lang="ts">
import axios from 'axios'
import { useChannelStore } from '@/stores/channel'
import { ref, watch } from 'vue'
// dayjs 核心
import dayjs from 'dayjs'
// 处理相对时间 xxx天前
import relativeTime from 'dayjs/plugin/relativeTime'
// 显示中文
import 'dayjs/locale/zh-cn'
// 中文
dayjs.locale('zh-cn')
// 启用插件
dayjs.extend(relativeTime)
// const list
// onMounted
// const props = defineProps<{ channelId: number }>()
const store = useChannelStore()
watch(
  () => store.channelId,
  async () => {
    const res = await axios.request<RootObject>({
      url: 'http://geek.itheima.net/v1_0/articles',
      params: {
        channel_id: store.channelId,
        timestamp: Date.now(),
      },
    })
    list.value = res.data.data.results
  },
  { immediate: true },
)
interface RootObject {
  data: Data
  message: string
}

interface Data {
  results: Result[]
  pre_timestamp: string
}

interface Result {
  art_id: string
  title: string
  aut_id: string
  comm_count: number
  pubdate: string
  aut_name: string
  is_top: number
  cover: Cover
}

interface Cover {
  type: number
  images?: string[]
}

const list = ref<Result[]>([])
</script>

<template>
  <div class="article-list">
    <div
      class="article-item"
      @click="$router.push(`/detail/` + item.art_id)"
      v-for="item in list"
      :key="item.art_id"
    >
      <p class="title">{{ item.title }}</p>
      <img
        v-for="(src, i) in item.cover.images"
        :key="i"
        class="img"
        :src="src"
        alt=""
      />
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ dayjs(item.pubdate).fromNow() }}</span>
      </div>
    </div>
  </div>
</template>
